<!--
 * @FileDescription 视角导航
 * @Author lz
 * @Date 20230223 15:37:23
 * @LastEditors lz
 * @LastEditTime 20230223 15:37:23
-->
<template>
    <!-- <div class="perspective_wp" v-if="state.show"> -->
    <!-- <div class="tit">视角导航</div>
        <img src="/structure/DecorativeLine_r.png" class="line">
        <img src="/structure/develop.png" class="develop" @click="show()"> -->

    <!-- <div class="ContentBox">
            <div class="viewBox" v-for="(item, index) in AppraisalData.Default.ViewpointList.value" :key="index">
            <img src="/structure/mb_ico.png" class="viewBox_ico" @click="ViewConfig(item.Id)"
                v-if="item.Name != '工具台' && item.Name != '零件台'">
                <img src="/structure/gearWheel.png" class="viewBox_ico_2" @click="ViewConfig(item.Id)" v-if="item.Name == '零件台'">
                <img src="/structure/Tooltable.png" class="viewBox_ico_3" @click="ViewConfig(item.Id)" v-if="item.Name == '工具台'">
                <p>{{ item.Name }}</p>
            </div> -->

    <!-- <div class="check_box">
                            <a-checkbox v-model:checked="state.checked" class="check_text">显示现场定位点</a-checkbox>
                        </div> -->

    <!-- </div> -->
    <!-- </div> -->

    <!--             <anchorPoint :Selected="AppraisalData.Default.currentPoint.value" :IndexId="index"
                :ViewportPointX="item.Content.split(',')[0] + '%'" :ViewportPointY="item.Content.split(',')[1] + '%'">
            </anchorPoint> -->
    <!-- @click="ViewConfig(item.Id, index)" -->
    <div class="toolbar_wp" v-if="state.show">
        <div class="tit">地图导航</div>
        <img src="/structure/DecorativeLine_r.png" class="line">
        <img src="/structure/develop.png" class="develop" @click="show()">
        <!-- 地图 -->
        <div class="mapNavigation">
            <div class="ap drop1" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[0].Id)"
                :class="Selected.current == 1 ? 'current' : ''">
            </div>
            <div class="ap drop2" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[1].Id)"
                :class="Selected.current == 2 ? 'current' : ''">
            </div>
            <div class="ap drop3" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[2].Id)"
                :class="Selected.current == 3 ? 'current' : ''">
            </div>
            <div class="ap drop4" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[3].Id)"
                :class="Selected.current == 4 ? 'current' : ''">
            </div>
            <div class="ap drop5" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[4].Id)"
                :class="Selected.current == 5 ? 'current' : ''">
            </div>
            <div class="ap drop6" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[5].Id)"
                :class="Selected.current == 6 ? 'current' : ''">
            </div>
            <div class="ap drop7" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[6].Id)"
                :class="Selected.current == 7 ? 'current' : ''">
            </div>
            <div class="ap drop8" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[7].Id)"
                :class="Selected.current == 8 ? 'current' : ''">
            </div>
            <div class="ap drop9" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[8].Id)"
                :class="Selected.current == 9 ? 'current' : ''">
            </div>
            <div class="ap drop10" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[9].Id)"
                :class="Selected.current == 10 ? 'current' : ''">
            </div>
            <div class="ap drop11" @click="ViewConfig(AppraisalData.Default.ViewpointList.value[10].Id)"
                :class="Selected.current == 11 ? 'current' : ''">
            </div>


            <!-- <div v-for="(item, index) in AppraisalData.Default.ViewpointList.value" :key="index">
            <anchorPoint :Selected="AppraisalData.Default.currentPoint.value" :IndexId="index" @click="ViewConfig(item.Id)">
            </anchorPoint>
            {{ item.Name }}
        </div> -->
        </div>
    </div>

    <div class="StowedState" v-if="!state.show" @click="show()">
        <img src="/structure/ExpandArrow_r.png" class="expArr">
    </div>
</template>

<script setup lang="ts">
import anchorPoint from './anchorPoint.vue'
import OrbitCameraComponent from '@components/Apps/InertialNavigation/OrbitCameraComponent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits } from 'vue'
import AppraisalData from '../../appraisalSettings/appraisalSettings';
import MessageCode from '../../MessageCode';
import { installContentResponse } from '../installMenu';

const Selected = reactive({
    current: 0,
});

const state = reactive({
    show: true,
    checked: ref(false)
});
function show() {
    state.show = !state.show
}
async function ViewConfig(Id: Number) {
    // AppraisalData.Default.currentPoint.value = `${index}`
    //获取视角数据
    let newArr: installContentResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DisassemblyAdapterRequest(MessageCode.Default.MsgCodesList.VIEW_DATA_CONFIG, `${Id}`))
    console.log('获取了视角数据', JSON.parse(newArr.Content));
    let view = JSON.parse(newArr.Content).Result
    console.log('viewwwwwwwwwwwwww', view);
    await OrbitCameraComponent.Default.UpdateV2Async(view.TargetContainer, view.Horizontal, view.Vertical, view.Distance, view.MinDistance, view.MaxDistance, view.RotateSensitivity, view.RotateSensitivity, view.ScrollSensitivity);
}
onMounted(() => {
    ViewConfig(1)
})
</script>

<style scoped>
.toolbar_wp {
    position: absolute;
    right: 0;
    top: 120px;
    width: 290px;
    height: 340px;
    background-image: url('/structure/gjl_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.mapNavigation {
    position: absolute;
    background-image: url('/structure/地图.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    right: 9px;
    top: 60px;
    width: 270px;
    height: 270px;
}
.line {
    width: 272px;
    height: 28px;
    position: absolute;
    right: 8px;
    top: 32px;
}
.develop {
    position: absolute;
    left: 4px;
    top: 14px;
    width: 27px;
    height: 32px;
}


/* .perspective_wp {
    position: absolute;
    right: 0;
    top: 108px;
    width: 290px;
    height: 617px;
    background-image: url('/structure/cz_sjdh_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
} */

.tit {
    text-align: right;
    font-size: 22px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #ffffff;
    padding-right: 38px;
    padding-top: 12px;
    margin-bottom: 26px;
}

.ContentBox {
    height: 484px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.ContentBox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.ContentBox::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 6px;
    background: #1AF2FF;
}

.ContentBox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.viewBox {
    width: 50%;
    float: left;
    text-align: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;

}

.viewBox_ico {
    width: 56px;
    height: 55px;
    margin-bottom: 12px;
    margin-top: 12px;
}

.viewBox_ico_2 {
    width: 66px;
    height: 41px;
    margin-bottom: 19px;
    margin-top: 19px;
}

.viewBox_ico_3 {
    width: 60px;
    height: 44px;
    margin-bottom: 17.5px;
    margin-top: 17.5px;
}

.check_box {
    text-align: center;
}

.StowedState {
    position: absolute;
    right: 0;
    top: 115px;
    width: 52px;
    height: 52px;
    background-image: url('/structure/stowedState_r_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.expArr {
    width: 27px;
    height: 32px;
    margin-top: 10px;
    margin-left: 13px;
}

.check_text {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #B1D0F4;
}

.ap {
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url('/public/structure/ic_定位_当前位置.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* .ap:hover {
    background-image: url('/public/structure/ic_定位_当前位置.png');
}

.current {
    background-image: url('/public/structure/ic_定位_当前位置.png');
} */

/* 默认视角 */
.drop1 {
    left: 45%;
    top: 45%;
}

/* 工具台 */
.drop2 {
    left: 16%;
    top: 77%;
}

/* A */
.drop3 {
    left: 0.7%;
    top: 23%;
}

/* B */
.drop4 {
    left: 0.7%;
    top: 12%;
}

/* C */
.drop5 {
    left: 17.6%;
    top: 4.7%;
}

/* D */
.drop6 {
    left: 28.75%;
    top: 4.7%;
}

/* E */
.drop7 {
    left: 39.9%;
    top: 4.7%;
}

/* F */
.drop8 {
    left: 51%;
    top: 4.7%;
}

/* G */
.drop9 {
    left: 68%;
    top: 4.7%;
}

/* H */
.drop10 {
    left: 87.7%;
    top: 12%;
}

/* I */
.drop11 {
    left: 87.7%;
    top: 23%;
}</style>